<template>
    <div>
        <!-- 主内容区域，根据show值切换显示 -->
        <div v-if="show">
            <!-- 卡片容器 -->
            <el-card class="box">
                <!-- 搜索区域 -->
                <div class="flex">
                    <div class="shop-name">店铺名称</div>
                    <div class="time_top">创建时间</div>
                </div>
                <div class="block_center"></div>
                
                <!-- 搜索框和日期选择器 -->
                <div class="flexBox">
                    <div>
                        <!-- 店铺名称搜索输入框 -->
                        <el-input v-model.trim="inputed" @input="filters" placeholder="请输入店铺" class="shop-input">
                            <template #prefix>
                                <el-icon class="el-input__icon">
                                    <search />
                                </el-icon>
                            </template>
                        </el-input>
                    </div>
                    <div class="date-picker-container">
                        <!-- 日期范围选择器 -->
                        <el-date-picker class="date-picker" @change="data_filters" v-model="time" type="daterange"
                            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
                    </div>
                </div>
                <div class="block_center"></div>
                <div class="block_center"></div>
                
                <!-- 操作按钮区域 -->
                <div class="option">
                    <div class="button-group">
                        <!-- 导出按钮 -->
                        <el-badge class="button_left">
                            <el-button type="primary" size="default" class="export-button">
                                导出
                            </el-button>
                        </el-badge>
                        
                        <!-- 状态筛选按钮 -->
                        <el-badge class="button_left status-button">
                            <el-button size="default" class="filter-button" @click="filts(0)" :type="whole">全部</el-button>
                        </el-badge>
                        <el-badge :value="status_e" class="button_left status-button">
                            <el-button size="default" class="filter-button" :type="oneStatus"
                                @click="filtstt(1)">待付款</el-button>
                        </el-badge>
                        <el-badge :value="status_z" class="button_left status-button">
                            <el-button size="default" class="filter-button" @click="filtstt(2)"
                                :type="twoStatus">已付款</el-button>
                        </el-badge>
                        <el-badge :value="status_hx" class="button_left status-button">
                            <el-button size="default" class="filter-button" @click="filtstt(3)"
                                :type="threeStatus">已核销</el-button>
                        </el-badge>
                        <el-badge :value="status_q" class="button_left status-button">
                            <el-button size="default" class="filter-button" @click="filtstt(4)"
                                :type="fourStatus">已取消</el-button>
                        </el-badge>
                    </div>
                </div>
                
                <!-- 数据表格 -->
                <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
                    class="data-table" :cell-style="{ 'text-align': 'center' }" ref="multipleTableRef"
                    v-el-table-infinite-scroll="handleTableScroll" :header-cell-style="{ 'text-align': 'center' }"
                    stripe @selection-change="handleSelectionChange" height="auto" empty-text="暂无数据">
                    <el-table-column type="selection" width="55" />
                    <el-table-column prop="id" label="序号" width="70" fixed />
                    <el-table-column prop="shop_title" width="160" empty-text="暂无数据" label="店铺名称" show-overflow-tooltip fixed>
                        <template #default="scope">
                            <span>{{ scope.row.shop_title || '暂无数据' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="nickname" width="160" label="用户名称" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.nickname || '暂无数据' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="code" width="160" label="订单号" show-overflow-tooltip>
                        <template #default="scope">
                            <span>{{ scope.row.code || '暂无数据' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="money" width="160" sortable label="总价格">
                        <template #default="scope">
                            <span>{{ scope.row.money || '暂无数据' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="num" sortable width="160" label="总数量">
                        <template #default="scope">
                            <div>
                                {{ scope.row.detail && scope.row.detail[0] ? scope.row.detail[0].num : '暂无数据' }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="状态">
                        <template #default="scope">
                            <p :class="getStatusClass(scope.row.status)">
                                {{
                                    scope.row.status == 1 ? '待付款' : scope.row.status == 2 ? '待使用' : scope.row.status == 3 ?
                                        '已使用' : scope.row.status == 4 ? '已取消' : '暂无数据'
                                }}</p>
                        </template>
                    </el-table-column>
                    <el-table-column prop="createtime" label="购买时间" show-overflow-tooltip width="100">
                        <template #default="scope">
                            <span>{{ scope.row.createtime || '暂无数据' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" fixed="right" width="120" label="操作">
                        <template #default="scope">
                            <div @click="particu(scope.row)" class="detail-link">
                                详情
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                
                <!-- 分页组件 -->
                <div class="paging">
                    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                        :page-sizes="[5, 10, 15, 20]" :small="small" :disabled="disabled" background
                        layout="total, sizes, prev, pager, next, jumper" :total="tableData.length" />
                </div>
            </el-card>
        </div>
        
        <!-- 详情页面 -->
        <div v-else class="detail-container">
            <el-card class="detail-card">
                <div class="detail-title">详情</div>
                <div class="user-info-container">
                    <div class="user-info-label">用户信息</div>
                    <el-form class="user-info-form">
                        <div class="form-row">
                            <el-form-item label="用户名称">
                                <el-input v-model.trim="user" class="user-input" disabled></el-input>
                            </el-form-item>
                            <el-form-item label="总数量">
                                <el-input v-model.trim="usernum" class="user-input" disabled>
                                </el-input>
                            </el-form-item>
                            <el-form-item class="status-item" label="订单状态">
                                <el-input v-model.trim="userorder" class="user-input"
                                    disabled></el-input>
                            </el-form-item>
                        </div>
                        <div class="form-row">
                            <el-form-item label="电话" class="tel-item">
                                <el-input v-model.trim="usertel" name="name" disabled
                                    class="user-input"></el-input>
                            </el-form-item>
                            <el-form-item label="总价格">
                                <el-input v-model.trim="userprice" class="user-input"
                                    disabled></el-input>
                            </el-form-item>
                            <el-form-item class="time-item" label="下单时间">
                                <el-input v-model.trim="usertime" class="user-input" disabled>
                                </el-input>
                            </el-form-item>
                        </div>
                    </el-form>
                </div>
                <div class="product-info-container">
                    <div class="product-info-label">商品信息</div>
                    <el-table :data="list" class="product-table" :cell-style="{ 'text-align': 'center' }"
                        ref="multipleTableRef" :header-cell-style="{ 'text-align': 'center' }" stripe
                        @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="id" label="序号" width="70" fixed />
                        <el-table-column prop="title" width="140" label="商品名称" show-overflow-tooltip fixed>
                            <template #default="scope">
                                <span>{{ scope.row.title || '暂无数据' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="desc" width="130" label="商品简介" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{ scope.row.desc || '暂无数据' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="price" width="160" label="商品价格" show-overflow-tooltip>
                            <template #default="scope">
                                <span>{{ scope.row.price || '暂无数据' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="foodshop_id" label="数量">
                            <template #default="scope">
                                <span>{{ scope.row.foodshop_id || '暂无数据' }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="num" width="120" label="图片">
                            <template #default="scope">
                                <div>
                                    <el-image class="product-image" :src="testName + (scope.row.img || '')"
                                        :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                                        :preview-src-list="[testName + (scope.row.img || '')]" :initial-index="4" fit="cover"
                                        preview-teleported v-if="scope.row.img" />
                                    <span v-else>暂无数据</span>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="status" fixed="right" label="销售量">
                            <template #default="scope">
                                <span>{{ scope.row.status || '暂无数据' }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="dialog-footer">
                    <el-button type="primary" @click="close">确认</el-button>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue'
import { food_order } from '../../../api/scien_order/index'
import { inject } from 'vue'
import '../../../style/all.css'//全局css
// 控制显示主页面还是详情页
const show = ref(true)

// 关闭详情页
const close = () => {
    show.value = true
    list.value = []
}

// 详情页数据
const user = ref('') // 用户名称
const usernum = ref('') // 总数量
const userorder = ref('') // 订单状态
const usertel = ref('') // 电话
const userprice = ref('') // 总价格
const usertime = ref('') // 下单时间

// 注入全局方法或变量
const testFn = inject('testFn')
testFn()
const testName = inject('testName') // 图片基础路径

// 获取本地存储的token
const tokens = JSON.parse(localStorage.getItem('tokens'));
console.log(tokens);

// 当前时间
let date = new Date();
let date_time = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`

// 数据引用
const Data = ref([]) // 原始数据
const tableData = ref([]) // 表格显示数据

// 状态角标数量
const status_e = ref('0') // 待付款
const status_z = ref('0') // 已付款
const status_q = ref('0') // 已取消
const status_hx = ref('0') // 已核销

// 组件挂载时获取数据
onMounted(() => {
    data()
})

// 请求数据渲染
const arr_sta = ref([]) // 状态分类数据
const indexoff = ref([]) // 原始数据副本
const data = () => {
    food_order({
        token: tokens.token,
        uid: tokens.userinfo.id
    }, {
        userid: tokens.userinfo.id,
        uid: tokens.userinfo.id
    }).then(res => {
        console.log(res);
        if (res.code == 1) {
            arr_sta.value = res.data
            indexoff.value = res.data
            
            // 统计各状态订单数量
            let arr = []
            let set = []
            let cancen = []
            let array_q = []
            for (let i = 0; i < res.data.length; i++) {
                // 待付款
                if (res.data[i].status == 1) {
                    arr.push(res.data[i])
                    status_e.value = arr.length
                }
                // 已付款
                if (res.data[i].status == 2) {
                    set.push(res.data[i])
                    status_z.value = set.length
                }
                // 已核销
                if (res.data[i].status == 3) {
                    cancen.push(res.data[i])
                    status_hx.value = cancen.length
                }
                // 已取消
                if (res.data[i].status == 4) {
                    array_q.push(res.data[i])
                    status_q.value = array_q.length
                }
                
                // 处理图片路径和状态显示
                res.data[i].imgs = testName + res.data[i].userImg
                if (Date.parse(new Date(date_time)) < Date.parse(new Date(res.data[i].over_time))) {
                    res.data[i].sheng = '生效中'
                } else {
                    res.data[i].sheng = '未生效'
                }
                if (res.data[i].status == '1') {
                    res.data[i].shen = '未支付'
                } else {
                    res.data[i].shen = '已支付'
                }
            }
            
            Data.value = res.data;
            tableData.value = res.data;
            OrderAll.value = tableData.value.length
            searh()
        } else {
            OrderAll.value = 0
        }
    })
}

// 状态按钮样式控制
const whole = ref('primary') // 全部按钮样式
const oneStatus = ref('') // 待付款按钮样式
const twoStatus = ref('') // 已付款按钮样式
const threeStatus = ref('') // 已核销按钮样式
const fourStatus = ref('') // 已取消按钮样式
const inputed = ref('') // 搜索输入框内容

// 店铺名称搜索
function filters() {
    console.log(inputed.value);
    tableData.value = Data.value.filter(item => {
        // 判断是否满足搜索条件
        if (String(item.shop_title).indexOf(String(inputed.value)) > -1) {
            return tableData.value;
        }
    });
    currentPage.value = 1

    // 重置状态角标
    let arrs = []
    let sets = []
    let cancens = []
    let array = []
    search_data.value = tableData.value
    
    // 统计各状态订单数量
    for (let k = 0; k < tableData.value.length; k++) {
        // 待付款
        if (tableData.value[k].status == 1) {
            arrs.push(tableData.value[k])
            status_e.value = arrs.length
        } else if (tableData.value[k].status !== 1 || tableData.value[k].status !== 3) {
            status_e.value = arrs.length
        }
        // 已付款
        if (tableData.value[k].status == 2) {
            sets.push(tableData.value[k])
            status_z.value = sets.length
        } else if (tableData.value[k].status !== 2) {
            status_z.value = sets.length
        }
        // 已核销
        if (tableData.value[k].status == 3) {
            array.push(tableData.value[k])
            status_hx.value = array.length
        } else if (tableData.value[k].status !== 3) {
            status_hx.value = array.length
        }
        // 已取消
        if (tableData.value[k].status == 4) {
            cancens.push(tableData.value[k])
            status_q.value = cancens.length
        } else if (tableData.value[k].status !== 4) {
            status_q.value = cancens.length
        }
        
        // 统计生效中/未生效数量
        if (Date.parse(new Date(date_time)) < Date.parse(new Date(tableData.value[k].over_time))) {
            usable.value++
        } else {
            nousable.value++
        }
    }
    
    OrderAll.value = tableData.value.length
    tableData.value = tableData.value
    if (tableData.value == "") {
        status_z.value = '0'
        status_e.value = '0'
        status_q.value = '0'
        status_hx.value = '0'
    }
}

// 日期筛选
const data_filters = () => {
    let end_time
    let start_time
    let ars = []
    if (time.value) {
        end_time = Date.parse(new Date(time.value[0]))
        start_time = Date.parse(new Date(time.value[1]))
    }
    console.log(end_time);

    tableData.value = Data.value.filter((item) => {
        if (item.shop_title ?
            item.shop_title.indexOf(inputed.value) > -1 &&
            (time.value ?
                Date.parse(new Date(`${item.createtime}`)) > end_time &&
                Date.parse(new Date(` ${item.createtime}`)) < start_time : true
            ) : true
        ) {
            return item
        }
        ars.push(item)
    });

    // 重置状态角标
    let arrs = []
    let sets = []
    let cancens = []
    let array = []
    search_data.value = tableData.value
    
    // 统计各状态订单数量
    for (let k = 0; k < tableData.value.length; k++) {
        // 待付款
        if (tableData.value[k].status == 1) {
            arrs.push(tableData.value[k])
            status_e.value = arrs.length
        } else if (tableData.value[k].status !== 1 || tableData.value[k].status !== 3) {
            status_e.value = arrs.length
        }
        // 已付款
        if (tableData.value[k].status == 2) {
            sets.push(tableData.value[k])
            status_z.value = sets.length
        } else if (tableData.value[k].status !== 2) {
            status_z.value = sets.length
        }
        // 已核销
        if (tableData.value[k].status == 3) {
            array.push(tableData.value[k])
            status_hx.value = array.length
        } else if (tableData.value[k].status !== 3) {
            status_hx.value = array.length
        }
        // 已取消
        if (tableData.value[k].status == 4) {
            cancens.push(tableData.value[k])
            status_q.value = cancens.length
        } else if (tableData.value[k].status !== 4) {
            status_q.value = cancens.length
        }
        
        // 统计生效中/未生效数量
        if (Date.parse(new Date(date_time)) < Date.parse(new Date(tableData.value[k].over_time))) {
            usable.value++
        } else {
            nousable.value++
        }
    }
    
    OrderAll.value = tableData.value.length
    tableData.value = tableData.value
    if (tableData.value == "") {
        status_z.value = '0'
        status_e.value = '0'
        status_q.value = '0'
        status_hx.value = '0'
    }
}

// 全选/单选
const multipleTableRef = ref()
const SelectArr = ref([])
const handleSelectionChange = (val) => {
    SelectArr.value = val
    console.log(SelectArr.value);
}

// 详情页商品列表
const list = ref([])

// 点击查看详情
const particu = (item) => {
    console.log(item.detail[0].goods);
    list.value = [] // 清空之前的数据
    
    // 设置商品数据
    if (item.detail && item.detail[0] && item.detail[0].goods) {
        list.value.push(item.detail[0].goods)
    } else {
        list.value.push({
            title: '暂无数据',
            desc: '暂无数据',
            price: '暂无数据',
            foodshop_id: '暂无数据',
            img: '',
            status: '暂无数据'
        })
    }
    
    // 显示详情页
    show.value = false
    
    // 设置用户信息
    user.value = item.nickname || '暂无数据'
    usertel.value = item.shop && item.shop.tel ? item.shop.tel : '暂无数据'
    usernum.value = item.detail && item.detail[0] ? item.detail[0].num : '暂无数据'
    userprice.value = item.detail && item.detail[0] ? item.detail[0].price : '暂无数据'

    // 设置订单状态
    if (item.status == 1) {
        userorder.value = '待付款'
    } else if (item.status == 2) {
        userorder.value = '待使用'
    } else if (item.status == 3) {
        userorder.value = '已使用'
    } else if (item.status == 4) {
        userorder.value = '已取消'
    } else {
        userorder.value = '暂无数据'
    }

    usertime.value = item.createtime || '暂无数据'
}

// 分页相关
const pageSize = ref(10); // 每页条数
const currentPage = ref(1); // 当前页码

// 搜索相关
const search_name = ref('') // 用户名搜索
const search_tel = ref('') // 电话搜索
const time = ref('') // 时间范围
const search_data = ref() // 搜索后的数据

// 状态统计
const OrderAll = ref('0') // 全部订单数
const usable = ref(0) // 生效中数量
const nousable = ref(0) // 未生效数量

// 搜索功能
const searh = () => {
    currentPage.value = 1
    usable.value = 0
    nousable.value = 0
    
    let end_time
    let start_time
    let ars = []
    if (time.value) {
        end_time = Date.parse(new Date(time.value[0]))
        start_time = Date.parse(new Date(time.value[1]))
    }
    
    // 执行筛选
    tableData.value = Data.value.filter((item) => {
        if (item.name ?
            item.name.indexOf(search_name.value) > -1 &&
            item.tel.indexOf(search_tel.value) > -1 &&
            (time.value ?
                Date.parse(new Date(`${item.create_year}-${item.create_month}-${item.create_date} ${item.create_time}`)) > end_time &&
                Date.parse(new Date(`${item.create_year}-${item.create_month}-${item.create_date} ${item.create_time}`)) < start_time : true
            ) : true
        ) {
            return item
        }
        ars.push(item)
    });

    // 重置状态角标
    let arrs = []
    let sets = []
    let cancens = []
    let arrsr = []
    search_data.value = tableData.value
    
    // 统计各状态订单数量
    for (let k = 0; k < tableData.value.length; k++) {
        // 待付款
        if (tableData.value[k].status == 1) {
            arrs.push(tableData.value[k])
            status_e.value = arrs.length
        } else if (tableData.value[k].status !== 1 || tableData.value[k].status !== 3) {
            status_e.value = arrs.length
        }
        // 已付款
        if (tableData.value[k].status == 2) {
            sets.push(tableData.value[k])
            status_z.value = sets.length
        } else if (tableData.value[k].status !== 2) {
            status_z.value = sets.length
        }
        // 已取消
        if (tableData.value[k].status == 4) {
            cancens.push(tableData.value[k])
            status_q.value = cancens.length
        } else if (tableData.value[k].status !== 4) {
            status_q.value = cancens.length
        }
        // 已核销
        if (tableData.value[k].status == 3) {
            arrsr.push(tableData.value[k])
            status_hx.value = arrsr.length
        } else if (tableData.value[k].status !== 3) {
            status_hx.value = arrsr.length
        }
        
        // 统计生效中/未生效数量
        if (Date.parse(new Date(date_time)) < Date.parse(new Date(tableData.value[k].over_time))) {
            usable.value++
        } else {
            nousable.value++
        }
    }
    
    OrderAll.value = tableData.value.length
    tableData.value = tableData.value
    if (tableData.value == "") {
        status_z.value = '0'
        status_e.value = '0'
        status_q.value = '0'
        status_hx.value = '0'
    }
}

// 状态筛选按钮点击事件
const filtstt = (i) => {
    // 重置按钮样式
    if (i == 1) {
        whole.value = ''
        oneStatus.value = 'primary'
        twoStatus.value = ''
        threeStatus.value = ''
        fourStatus.value = ''
    } else if (i == 2) {
        whole.value = ''
        oneStatus.value = ''
        twoStatus.value = 'primary'
        threeStatus.value = ''
        fourStatus.value = ''
    } else if (i == 3) {
        whole.value = ''
        oneStatus.value = ''
        twoStatus.value = ''
        threeStatus.value = 'primary'
        fourStatus.value = ''
    } else if (i == 4) {
        whole.value = ''
        oneStatus.value = ''
        twoStatus.value = ''
        threeStatus.value = ''
        fourStatus.value = 'primary'
    }
    
    // 执行筛选
    let art = [];
    tableData.value = search_data.value.filter((item) => {
        // 判断是否满足搜索条件
        if (String(item.status).indexOf(String(i)) > -1) {
            return tableData
        }
    });
    console.log(tableData.value);
}

// 点击全部按钮
const filts = () => {
    currentPage.value = 1
    whole.value = 'primary'
    oneStatus.value = ''
    twoStatus.value = ''
    threeStatus.value = ''
    fourStatus.value = ''
    tableData.value = search_data.value
}

// 获取状态样式类
const getStatusClass = (status) => {
    switch(status) {
        case 1: return 'status-pending';
        case 2: return 'status-paid';
        case 3: return 'status-used';
        case 4: return 'status-cancelled';
        default: return '';
    }
}
</script>

<style scoped>
/* 主内容区域样式 */
.box {
    width: 100%;
    margin: 0 auto;
}

/* 搜索区域样式 */
.flex {
    display: flex;
    align-items: center;
}

.shop-name {
    width: 220px;
}

.time_top {
    margin-left: 20px;
}

.block_center {
    height: 10px;
}

/* 搜索框和日期选择器样式 */
.flexBox {
    display: flex;
    width: 100%;
    align-items: center;
}

.shop-input {
    width: 220px;
}

.date-picker-container {
    margin-left: 20px;
}

.date-picker {
    width: 220px;
}

/* 操作按钮区域样式 */
.option {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.button-group {
    margin-top: 0;
}

.button_left {
    margin-right: 10px;
}

.status-button {
    margin-left: 10px;
}

.export-button {
    height: 35px;
}

.filter-button {
    height: 35px;
}

/* 数据表格样式 */
.data-table {
    width: 100%;
}

/* 状态文本样式 */
.status-pending {
    color: rgba(255, 165, 0, 1);
}

.status-paid {
    color: rgba(64, 158, 255, 1);
}

.status-used {
    color: rgba(124, 252, 0, 1);
}

.status-cancelled {
    color: rgba(128, 128, 128, 1);
}

/* 详情链接样式 */
.detail-link {
    color: rgba(64, 158, 255, 1);
    cursor: pointer;
}

/* 分页样式 */
.paging {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* 详情页面样式 */
.detail-container {
    padding: 10px;
}

.detail-card {
    width: 96%;
    margin-left: 2%;
    margin-top: 1%;
    position: relative;
    height: 600px;
}

.detail-title {
    padding: 10px;
}

/* 用户信息区域样式 */
.user-info-container {
    display: flex;
}

.user-info-label {
    padding: 30px;
}

.user-info-form {
    padding-top: 60px;
    width: 80%;
}

.form-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.user-input {
    height: 35px;
    width: 150px;
}

.status-item {
    margin-top: -20px;
}

.tel-item {
    margin-left: 28px;
}

.time-item {
    margin-top: -20px;
}

/* 商品信息区域样式 */
.product-info-container {
    display: flex;
}

.product-info-label {
    padding: 30px;
}

.product-table {
    width: 80%;
    height: 300px;
}

.product-image {
    width: 80px;
    height: 50px;
}

/* 对话框底部按钮样式 */
.dialog-footer {
    margin-left: 85%;
    margin-top: 4px;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-upload-list--picture-card) {
    --el-upload-list-picture-card-size: 100px;
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0;
}

:deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 99px;
    align-items: center;
    background-color: var(--el-fill-color-lighter);
    border: 1px dashed var(--el-border-color-darker);
    border-radius: 6px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-flex;
    height: var(--el-upload-picture-card-size);
    justify-content: center;
    vertical-align: top;
    width: var(--el-upload-picture-card-size);
}

:deep(.el-date-range-picker__content) {
    box-sizing: border-box;
    float: left;
    margin: 0;
    padding: 16px;
    width: 38%;
}
</style>